<template>
	<div id="app">
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>模块管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card style="width: 900px;">
		<el-container>
			<el-aside width="200px">
				<el-tree :data="Module" :props="defaultProps" v-on:node-click="handleNodeClick"></el-tree>
			</el-aside>
				<el-form :model="editForm" :rules="editFormrules" ref="editFormRef" label-width="70px">
					<el-form-item>
						<el-button type="success" @click="add(editForm)">添加子节点</el-button>
						<el-button type="primary" @click="edit">设置父节点</el-button>
						<el-button type="danger" @click="del(editForm)">删除</el-button>
					</el-form-item>
					<el-form-item><span id="">功能模块信息维护</span></el-form-item>
					<el-form-item label="Id">
						<el-input :disabled="true" v-model="editForm.Id"></el-input>
					</el-form-item>
					<el-form-item label="名字" prop="Name">
						<el-input v-model="editForm.Name"></el-input>
					</el-form-item>
					<el-form-item label="父Id" prop="parentId">
						<el-input v-model="editForm.ParentId" :disabled="parentdisabled"></el-input>
					</el-form-item>
					<el-form-item label="路径" prop="url">
						<el-input v-model="editForm.Path"></el-input>
					</el-form-item>
					<el-form-item label="权重" prop="weight">
						<el-input v-model="editForm.Weight"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="success" @click="SaveForm(editForm)">保存</el-button>
					</el-form-item>
				</el-form>
		</el-container>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultProps: {
					children: 'children',
					label: 'Name'
				},
				
				Module: [],
				// 数据绑定对象
				editForm: {
					Id: '',
					Name: '',
					ParentId: '',
					Path: '',
					Weight: ''
				},
				// 预声明字段
				formName: {},
				// 验证规则
				editFormrules:{
					Name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '用户名的长度在2~10之间',
							trigger: 'blur'
						}]
				},
				parentdisabled:true
			}
		},
		created: function() {
			this.getModules();
		},
		methods: {
			async getModules(){
				const {data:res} = await this.$http.get('api/Modules/GetModule')
				this.Module=res.data;
			},
			//展示编辑模块对话框
			async handleNodeClick(modes) {
				this.editForm = modes;
				console.log(modes);
			},
			//新增
			add(editForm){
				if(editForm.Id == null || editForm.Id == ""){
					this.$message.warning("请先选择");
				}
				this.editForm={};
				this.disabled=false;
				this.parentdisabled=false;
				this.editForm.Id=0;
				this.editForm.ParentId=editForm.Id;
			},
			edit(){
				if(this.editForm.Id == null || this.editForm.Id ==""){
					this.$message.warning("请先选择");
				}
				this.parentdisabled=false;
			},
			async del(editForm){
				if(editForm.Id == null || editForm.Id ==""){
					this.$message.warning("请先选择");
				}else{
					const confirmResult = await this.$confirm('此操作将永久删除商品, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
						//如果用户取消删除则 则打印cancel字符串
						.catch(err => err)
					//如果用户确认删除则confirmResult 为confim字符串
					if (confirmResult != 'confirm') {
						return this.$message.info("已经取消删除")
					}
					const {data: res} = await this.$http.post('api/Modules/GetModuleDel' ,editForm)
					if (res.code != 0) {
						this.$message.error("删除失败" + res.msg);
					}
					this.$message.success(res.msg);
					this.editForm={};
					this.getModules();
				}
			},
			async SaveForm(formName){
				if(formName.Id != null || formName.Id != ""){
					//新增为0   
					if(formName.Id == 0){
						this.$refs.editFormRef.validate(async valid =>{
							if(!valid) return;
							const {data:res} = await this.$http.post('api/Modules/GetModuleAdd',formName)
							if(res.code != 0){
								this.$message.error(res.msg);
							}
							this.$message.success(res.msg);
							this.editForm={};
							this.getModules();
						})
					}else{
						// 编辑为非0
						this.$refs.editFormRef.validate(async valid => {
							if(!valid) return;
							const {data:res} =await this.$http.post('api/Modules/GetModuleEdit',formName)
							if(res.code !=0 ){
								this.$message.error(res.msg);
							}
							this.$message.success(res.msg);
							this.editForm={};
							this.getModules();
						})
					}
				}else{
					this.$message.warning("请选择");
				}
			}
		}
	}
</script>

<style scoped>
	.el-header,
	.el-footer {
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.gn {
		display: flex;
		padding-top: 20px
	}

	.gn span {
		margin-right: 12px;
		text-align: end;
		width: 10%;
		padding-top: 10px;
	}

	.gn el-input {
		margin-left: 300px
	}

	.bc {
		padding-left: 50px;
		padding-top: 30px;
	}

	.el-aside {
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
